<template>
  <div class="card-view">
    <slot name="header" />
    <div :id="'echartsBox' + props.id" :style="{ width: '100%', height: '88%' }"></div>
  </div>
</template>
<script setup lang="ts">
import { nextTick } from "vue"
import * as echarts from "echarts"
const props = defineProps({
  // 每个卡片的id进行对应的DOM选择
  id: {
    type: [String, Number],
    required: true,
  },
})

//绘制饼图
let myChart: any
const initChart = () => {
  myChart = echarts.init(document.getElementById("echartsBox" + props.id))
  myChart.setOption({
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
    ],
  })
}

onMounted(() => {
  //子组件加载完毕，父组件才进行加载，必须采用nextTick 进行异步队列排队，进行最后加载echarts图表
  nextTick(() => {
    initChart()
  })
})

const reRender = function () {
  const timer = setTimeout(() => {
    clearTimeout(timer)
    myChart.resize()
  }, 600)
}
window.addEventListener("resize", function () {
  reRender()
})

defineExpose({
  reRender,
})
</script>

<style scoped lang="less">
.card-view {
  height: 100%;
}
</style>
